<template>
  <div class="user_right fl ml20">
    <div class="el_tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="all"></el-tab-pane>
        <el-tab-pane label="待付款" name="unconfirm"></el-tab-pane>
        <el-tab-pane label="待发货" name="stay"></el-tab-pane>
        <el-tab-pane label="待收货" name="inspection"></el-tab-pane>
        <el-tab-pane label="已完成" name="complete"></el-tab-pane>
        <el-tab-pane label="已作废" name="invalid"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="order_inp">
      <div>
        <div>
          <span>订单编号</span>
          <el-input v-model="no"></el-input>
        </div>
        <div>
          <span>店铺名称</span>
          <el-select v-model="storeId" placeholder="请选择" @change="pickStore">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <span>订单日期</span>
          <el-date-picker v-model="start" type="date" placeholder="起始日期"></el-date-picker>
          <div class="sort_d"></div>
          <el-date-picker v-model="end" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div>
        <span>订单类型</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <button>搜索</button>
      </div>
    </div>
    <div class="order_table">
      <table>
        <colgroup>
          <col width="215" />
          <col width="90" />
          <col width="90" />
          <col width="100" />
          <col width="90" />
          <col width="105" />
          <col width="105" />
          <col width="105" />
        </colgroup>
        <tbody class="tb_top">
          <tr>
            <th class="goodsName">货品</th>
            <th>单价</th>
            <th>数量</th>
            <th>总金额</th>
            <th>发货地</th>
            <th>订单类型</th>
            <th>订单状态</th>
            <th>交易操作</th>
          </tr>
        </tbody>
        <tbody class="tb_content" v-for="(item,index) in ordersList" :key="index">
          <div class="sort_i"></div>
          <tr class="cont_top">
            <td>订单号:{{item.no}}</td>
            <td colspan="2">{{item.created_at}}</td>
            <td colspan="4" style="text-align: left">{{item.items[0].business.name}}</td>
            <td class="finger" @click="delete_order">删除订单</td>
          </tr>
          <tr class="cont_cont" v-for="(itema,indexa) in item.items" :key="indexa">
            <td>
              <img class="td_img" :src="itema.product.image" alt />
              <span>{{itema.product.title}}</span>
            </td>
            <td>￥{{itema.price}}</td>
            <td>{{itema.amount}}</td>
            <td>￥{{Number(itema.price)*Number(itema.amount)}}</td>
            <td>湖北武汉</td>
            <td>{{item.payment_method === 'wechat_pay'?'微信支付':item.payment_method==='alipay'?'支付宝支付':item.payment_method==='offline_pay'?'线下支付':'暂未支付'}}</td>
            <td>
              <p>{{item.status==='pending'?'待付款':item.status === 'paying'?'支付中':item.status ==='paid'?'已支付':item.status === 'delivered'?'已发货':item.status === 'received'?'已收货':'完成'}}</p>
              <router-link :to="`/selleru/order_details/${item.id}`">
                <p class="line_item">订单详情</p>
              </router-link>
            </td>
            <td>
              <el-link
                type="danger"
                style="margin: 0 3px;"
                v-if="item.status === 'paid'"
                @click="isdelivery = true;orderId=item.id"
              >发货</el-link>
              <el-link
                style="margin: 0 3px"
                type="danger"
                v-if="item.status !== 'pending' && item.invoice_status !== 'success'"
                @click="isinvoice = true;orderId=item.id;bill = ordersList[index].user_invoice;addressData = ordersList[index].invoice_address"
              >开发票</el-link>
              <span v-if="item.invoice_status === 'success'">开票成功</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="laypage">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="ordermeta.current_page"
        :page-count="ordermeta.last_page"
        @prev-click="prev"
        @next-click="uanext"
        @current-change="btn_current"
      ></el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="isdelivery" width="30%">
      <div class="popup_delivery">
        <el-select v-model="logisticsId" placeholder="请选择物流公司">
          <el-option
            v-for="item in logisticsList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
        <el-input
          style="width:250px;margin-left: 25px;"
          v-model="logisticsCode"
          placeholder="请输入物流订单号"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isdelivery = false">取 消</el-button>
        <el-button type="primary" @click="delivery">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="发票信息" :visible.sync="isinvoice" width="30%">
      <div id="ZYBill" class="hidden adress_select_area" style="margin-top:20px">
        <ul class="item-bill" style="width: 525px;">
          <li>
            <span class="tt">公司名称：</span>
            <span>{{bill.company_name}}</span>
            <!-- <input v-model="bill.company_name" name="ctl00$ContentPlaceHolder1$txtTitle3" type="text" id="ContentPlaceHolder1_txtTitle3" class="w400 txt" style="border: 1px solid #fff;"> -->
          </li>
          <li>
            <span class="tt">纳税人识别号：</span>
            <span>{{bill.credit_code}}</span>
            <!-- <input v-model="bill.credit_code" name="ctl00$ContentPlaceHolder1$txtTaxNumber3" type="text" id="ContentPlaceHolder1_txtTaxNumber3" class="w400 txt" style="border: 1px solid #fff;"> -->
          </li>
          <li>
            <span class="tt">公司地址：</span>
            <span>{{bill.registered_address}}</span>
            <!-- <input v-model="bill.registered_address" name="ctl00$ContentPlaceHolder1$txtInvoiceAddr3" type="text" id="ContentPlaceHolder1_txtInvoiceAddr3" class="w400 txt" style="border: 1px solid #fff;"> -->
          </li>
          <li>
            <span class="tt">公司电话：</span>
            <span>{{bill.phone}}</span>
            <!-- <text name="ctl00$ContentPlaceHolder1$txtTel3_1" type="text" id="ContentPlaceHolder1_txtTel3_1" class="w400 txt" style="border: 1px solid #fff;">{{bill.phone}}</text> -->
          </li>
          <li>
            <span class="tt">开户银行名称：</span>
            <span>{{bill.bank}}</span>
            <!-- <input v-model="bill.bank" name="ctl00$ContentPlaceHolder1$txtBankName3" type="text" id="ContentPlaceHolder1_txtBankName3" class="w400 txt" style="border: 1px solid #fff;"> -->
          </li>
          <li>
            <span class="tt">银行账号：</span>
            <span>{{bill.account}}</span>
            <!-- <input v-model="bill.account" name="ctl00$ContentPlaceHolder1$txtBanknumber3" type="text" id="ContentPlaceHolder1_txtBanknumber3" class="w400 txt" style="border: 1px solid #fff;"> -->
          </li>
        </ul>
      </div>
      <div class="m-address">
        <div class="title-member-sub">
          <h3>收货地址</h3>
        </div>
        <ul>
          <li>
            <span class="tt">{{ addressData.contact_name }}</span>
            {{addressData.contact_phone}}
          </li>
          <li>
            <span class="ads">{{addressData.address}}</span>
            <span class="ads"></span>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isinvoice = false">取 消</el-button>
        <el-button type="primary" @click="btnIsinvoice">确认开票</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrders,
  ovistoreList,
  logisticsCompany,
  merchantShipp,
  isinvoiceapi
} from "@/api/business";
export default {
  data() {
    return {
      no: "",
      name: "",
      dateline_t: "",
      dateline_f: "",
      activeName: "all",
      start: "",
      end: "",
      isdelivery: false,
      isinvoice: false,
      bill: [],
      addressData: [],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      logisticsList: [],
      storeList: [],
      ordersList: [],
      nordersList: [],
      ordermeta: [],
      orderId: "",
      value: "",
      orderIndex: 1,
      storeId: "",
      logisticsId: "",
      logisticsCode: "",
    };
  },
  created() {
    this.getstoreList();
    this.getlogisticsCompany();
  },
  watch: {
    storeId: {
      handler(val) {
        this.getOreder();
      },
    },
    orderIndex: {
      handler(val) {
        this.getOreder();
      },
    },
  },
  methods: {
    delete_order() {
      this.$confirm("此操作将永久删除此商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleClick(tab) {
      switch (this.activeName) {
        case "all":
          this.ordersList = this.nordersList;
          break;
        case "unconfirm":
          this.ordersList = this.nordersList.filter(
            (item) => item.status === "pending"
          );
          break;
        case "stay":
          this.ordersList = this.nordersList.filter(
            (item) => item.status === "paid"
          );
          break;
        case "inspection":
          this.ordersList = this.nordersList.filter(
            (item) => item.status === "delivered"
          );
          break;
        case "complete":
          this.ordersList = this.nordersList.filter(
            (item) => item.status === "received"
          );
          break;
      }
    },
    async getOreder() {
      this.storeId = this.storeId || this.storeList[0].id;
      const res = await getOrders(this.storeId, this.orderIndex);
      this.ordersList = res.data;
      this.nordersList = res.data;
      this.ordermeta = res.meta;
    },
    // 上一页
    prev() {
      this.orderIndex--;
      return;
    },
    // 下一页
    uanext() {
      this.orderIndex++;
      return;
    },
    // 点击选页
    btn_current(e) {
      this.orderIndex = e;
      return;
    },

    async getstoreList() {
      this.storeList = await ovistoreList();
      this.getOreder();
    },
    pickStore(e) {
      this.storeId = e;
    },
    async getlogisticsCompany() {
      this.logisticsList = await logisticsCompany();
    },
    // 发货
    async delivery() {
      let data = {
        express_code: this.logisticsId,
        express_no: this.logisticsCode,
      };
      await merchantShipp(this.orderId, data);
    },

    async btnIsinvoice(){
      this.isinvoice = false;
      let data = {
        invoice_status:'success'
      }
      await isinvoiceapi(this.orderId,data);
    }
  },
};
</script>

<style lang="scss" scoped>
.user_right {
  width: 950px;
  background: #fff;
  padding-bottom: 30px;
  /deep/.el-tabs {
    padding-bottom: 40px;
    padding: 30px;
    .el-tabs__header {
      height: 40px;
      border-bottom: 1px solid #e6e6e6;
      .el-tabs__item {
        padding: 0 20px;
        height: 40px;
        box-sizing: border-box;
        line-height: 40px;
        display: inline-block;
        list-style: none;
        font-weight: 500;
        color: #303133;
        position: relative;
        font-size: 18px;
        user-select: none;
      }
      .el-tabs__item:hover {
        color: #4448f8;
      }
      .el-tabs__active-bar {
        height: 3px;
        background-color: #4448f8;
      }
    }
    .el-tabs__content {
      color: #333;
      .ptb20 {
        padding-bottom: 20px;
      }
      .mt40 {
        margin-top: 40px;
      }
      .center {
        text-align: center;
        .ico_fail {
          background: url("~@/assets/img/fail_ico.png") no-repeat 0 0;
          width: 60px;
          height: 63px;
          display: inline-block;
        }
        p {
          color: #999;
          margin-top: 20px;
          font-size: 14px;
        }
      }
      ul {
        overflow: hidden;
        margin-top: 28px;
        li {
          position: relative;
          float: left;
          width: 162px;
          height: 237px;
          margin-left: 20px;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          .goA {
            display: block;
          }
          .hd {
            height: 160px;
            padding: 10px 0;
            box-sizing: border-box;
            text-align: center;
            img {
              max-width: 100%;
            }
          }
        }
        li:first-child {
          margin-left: 0;
        }
        li:hover {
          border-color: #4448f8;
          display: block;
        }
        li:before {
          position: absolute;
          content: "查看详情";
          width: 100%;
          line-height: 25px;
          left: 0;
          top: 0;
          color: #fff;
          background: red;
          text-align: center;
          background: rgba(68, 72, 248, 0.7);
        }
      }
    }
  }
}
.order_inp {
  margin-left: 36px;
  margin-bottom: 35px;
  > div {
    &:nth-child(1) {
      display: flex;
      > div {
        font-size: 17px;
        color: #666;
        font-weight: 500;
        display: flex;
        align-items: center;
        &:nth-child(1),
        &:nth-child(2) {
          margin-right: 20px;
        }
        > span {
          text-align: center;
          margin-right: 15px;
        }
        /deep/.el-input {
          width: 140px;
          /deep/.el-input__inner {
            height: 32px;
          }
        }
      }
    }
    &:nth-child(2) {
      margin-top: 25px;
      > span {
        font-size: 17px;
        color: #666;
        margin-right: 14px;
      }
      /deep/.el-select {
        width: 140px;
        /deep/.el-input__inner {
          height: 32px;
        }
      }
      > button {
        margin-left: 20px;
        width: 154px;
        height: 32px;
        border-radius: 5px;
        background-color: #4448f8;
        border: 0;
        font-size: 15px;
        color: #fff;
        font-weight: 600;
        &:active {
          background: #3133a5;
        }
      }
    }
  }
}
.sort_d {
  width: 15px;
  height: 3px;
  border-radius: 20px;
  background-color: #666;
  margin: 0 10px;
}
.tb_top {
  font-size: 16px;
  color: #666;
  width: 912px;
  height: 50px;
  line-height: 50px;
  background-color: #eee;
  th {
    font-weight: 500 !important;
  }
}
.goodsName {
  text-align: left;
  padding-left: 35px;
}
.order_table {
  line-height: 50px;
  width: 910px;
  margin: 0 auto;
  border-radius: 5px;
}
td {
  text-align: center;
}
.td_img {
  width: 80px;
  height: 80px;
}
.tb_content {
  width: 910px;
}
.cont_top {
  border: 1px solid #eeeeee;
}
.sort_i {
  height: 15px;
}
.cont_cont {
  border: 1px solid #eeeeee;
}
.finger {
  cursor: pointer;
}
.line_item {
  cursor: pointer;
}
.laypage {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.popup_delivery {
  display: flex;
}
.item-bill {
  display: inline-block;
  border: 1px solid #ababab;
}
.adress_select_area .item-bill .tt {
  display: inline-block;
  width: 130px;
  box-sizing: border-box;
  padding-right: 10px;
  text-align: right;
}

.adress_select_area .item-bill li {
  margin: 5px 0;
}

.adress_select_area .item-bill input[type="text"] {
  width: 304px;
  height: 28px;
  box-sizing: border-box;
  margin-right: 0;
  padding: 8px;
  border: 1px solid #dedede;
}

.adress_select_area .item-bill input[type="text"].zone {
  width: 100px;
}

.adress_select_area .item-bill input[type="text"].tel {
  width: 188px;
}

.adress_select_area .item-bill .line {
  margin: 0 5px;
}
.tt {
  padding: 5px;
}
.m-address {
  margin-top: 4px;
}

.m-address ul {
  padding: 24px 46px;
}

.m-address ul li {
  padding: 6px 0;
}

.m-address ul li .tt {
  margin-right: 20px;
}

.m-address ul li .ads {
  margin-right: 10px;
}
</style>